<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="@/static/home/home-bg.png" mode="widthFix"></image>
			</view>

		</view>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'个人资料'"></CustomNav>
		<view class="bottom">
			<view class="info">
				<view class="head-img">
					<image :src="user.faceUrl" class="mine-img"></image>
					<button class="avatar-wrapper" @chooseavatar="photoChoose" open-type="chooseAvatar" size="mini">
						上传头像</button>
				</view>
				<view class="name">
					<view class="sex-name">
						昵称
					</view>
					<view class="phone">
						<input v-model="user.userName" />
					</view>
				</view>
				<view class="string"></view>
				<view class="name">
					<view class="sex-name">
						手机号
					</view>
					<view class="phone">
						<input v-model="user.mobile" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="handleSave">
			提交
		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	import {
		getCustomNavData,
		showToast
	} from '@/util/util.js'
	import {
		selectUserByIdApi,
		updateUserInfo
	} from '@/api/mine.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				user: {
					faceUrl: '',
					userName: '',
					mobile: ''
				},
				rules: {
					faceUrl: {
						name: '头像',
						required: true,
					},
					userName: {
						name: '昵称',
						required: true,
					},
					mobile: {
						name: '手机号',
						required: true,
					},
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			getSelectUserById() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				selectUserByIdApi({}).then((res) => {
					uni.hideLoading()
					this.user = res
				})
			},
			photoChoose(e) {
				let loginInfo = getStorage('login');
				const filePath = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.uploadFile({
					url: config.requestUrl + 'szwq/upload',
					filePath: filePath,
					name: 'file',
					header: {
						'authori-zation': loginInfo.token
					},
					success: (res) => {
						const data = JSON.parse(res.data);
						uni.hideLoading()
						if (data.code == 200) {
							showToast('上传成功')
							this.user.faceUrl = data.data
						} else {
							showToast(data.msg)
						}
					},
					fail: (res) => {
						uni.hideLoading()
						showToast('上传失败');
					}
				})
			},
			handleSave() {
				if (validate(this.user, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					updateUserInfo({
						faceUrl: this.user.faceUrl,
						userName: this.user.userName,
						mobile: this.user.mobile
					}).then((res) => {
						uni.hideLoading()
						let oldUser = getStorage('login');
						oldUser.userName = this.user.userName
						oldUser.faceUrl = this.user.faceUrl
						setStorage('login', oldUser)
						showToast('保存成功', () => {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						})
					}).catch(() => {
						uni.hideLoading()
						showToast('保存失败');
					})
				}
			}
		},
		onShow() {
			const loginInfo = getStorage('login');
			if (loginInfo) {
				this.user = loginInfo
			}
		},
		mounted() {
			this.custom = getCustomNavData();
			this.getSelectUserById()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 120%;

				image {
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}


		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.info {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;

				.head-img {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.mine-img {
						align-items: center;
						width: 170rpx;
						height: 170rpx;
						border-radius: 50%;
						margin-bottom: 30rpx;
						background-color: #F6F6F6;
					}

					.avatar-wrapper {
						margin-bottom: 30rpx;
					}
				}

				.name {
					display: flex;
					justify-content: left;
					margin: 50rpx 0;

					.sex-name {
						// margin-right: 150rpx;\
						width: 200rpx;
					}

					.phone {}

				}

				.string {
					width: 100%;
					height: 5rpx;
					background-color: #F7F7F7;
				}
			}

		}


		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
			background-color: #157DFA;
		}
	}
</style>